Skip to main content

Typography

Font Family​

Primary: Inter (with system-ui fallback)
Weights: 300 (light), 400 (regular), 500 (medium), 600 (semibold), 700 (bold)

Heading Scale​

Page Titles / Hero Headings​

text-5xl md:text-6xl lg:text-7xl
font-bold
leading-tight tracking-tight
text-gray-900 / text-white

Section Headings​

text-4xl lg:text-5xl
font-bold
leading-tight tracking-tight
mb-6 sm:mb-8

Subsection Headings​

text-2xl lg:text-3xl
font-bold
text-gray-900

Card/Component Headings​

text-xl
font-bold

Body Text Scale​

Large Body (Intros, Hero Subtext)​

text-xl sm:text-2xl
leading-relaxed
font-light
text-gray-600 / text-gray-200

Standard Body​

text-lg sm:text-xl
leading-relaxed
font-light
text-gray-700 / text-slate-200

Small Body​

text-base sm:text-lg
leading-relaxed

Patterns & Guidelines​

Headings​

  • Always: font-bold, leading-tight, tracking-tight
  • Dark text on light, light text on dark

Body Text​

  • Always: font-light, leading-relaxed
  • Responsive: Scale up with sm: and lg: breakpoints

Contrast​

  • Light backgrounds: text-gray-600 to text-gray-900
  • Dark backgrounds: text-slate-200 to text-white

Examples​

Page Header​

<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-8 leading-tight tracking-tight">
  Page Title
</h1>
<p className="text-2xl text-gray-600 max-w-4xl mx-auto leading-relaxed font-light">
  Page subtitle
</p>

Section Header​

<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight tracking-tight">
  Section Title
</h2>
<p className="text-xl leading-relaxed font-light text-gray-700">
  Section description
</p>